<template>
  <el-row class="detailPage">
    <el-form ref="form" label-width="80px" label-position="left">
      <el-form-item label="用例标题">
        <el-row>
          <el-col :span="16"
            ><el-input
              v-model="$store.state.selectedInterface.data.name"
              size="small"
            ></el-input
          ></el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="接口路径">
        <el-row>
          <el-col :span="4"
            ><el-select
              v-model="$store.state.selectedInterface.data.func"
              size="small"
              placeholder="请选择请求方式"
            >
              <el-option label="GET" value="get"></el-option>
              <el-option label="POST" value="post"></el-option> </el-select
          ></el-col>
          <el-col :span="12" style="padding-left: 20px;"
            ><el-input
              v-model="$store.state.selectedInterface.data.url"
              size="small"
            ></el-input
          ></el-col>
          <el-col :span="8" style="padding-left: 10px;">
            <el-button type="primary" @click="dialogVisible = true" size="small"
              >保存</el-button
            >
            <el-button type="success" @click="onSend" size="small"
              >请求</el-button
            >
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="Headers">
        <!-- 头部携带的参数组件 -->
        <KeyValueList type="headers"/>
      </el-form-item>
      <el-row>
        <el-tabs v-model="tabType">
          <el-tab-pane label="Params" name="first">
            <!-- params参数子组件 -->
            <KeyValueList type="params"/>

          </el-tab-pane>
          <el-tab-pane label="x-www-form-urlencoded" name="second"
            >
            <KeyValueList type="form"/>
            </el-tab-pane
          >
          <el-tab-pane label="json" name="third">
            <el-input
          type="textarea"
          :autosize="{ minRows: 8, maxRows: 10 }"
          placeholder="请输入内容"
          v-model="$store.state.selectedInterface.data.textarea"
          class="input_reader1"
        >
        </el-input
      >
          </el-tab-pane>
        </el-tabs>
        <!-- <el-radio-group v-model="$store.state.selectedInterface.data.type" size="small">
          <el-radio-button label="Params" name="type"></el-radio-button>
          <el-radio-button
            label="x-www-form-urlencoded"
            name="type"
            class="select"
          ></el-radio-button>
          <el-radio-button label="json" name="type"></el-radio-button>
        </el-radio-group> -->
      </el-row>
    </el-form>
    <!-- 发送请求的抽屉结果 -->
    <el-drawer
      title="Response"
      :visible="resultVisible"
      direction="rtl"
      :before-close="handleClose"
      size="50%"
      v-if="$store.state.requestResponse"
    >
      <DrawerRespone />
    </el-drawer>
    <el-dialog
      title="提示"
      :visible="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-row style="text-align: center;">
        <el-select v-model="selectvalue" placeholder="请选择" size="small">
        <el-option label="未执行" value="1"> </el-option>
        <el-option label="成功" value="2"> </el-option>
        <el-option label="失败" value="3"> </el-option>
      </el-select>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false" size="small" >确 定</el-button
        >
      </span>
    </el-dialog>
  </el-row>
</template>

<script>
import KeyValueList from "./keyValueList";

import DrawerRespone from "./drawerRespone";
// import { requestResponseList } from "@/mock/constants";
import { post, get } from "@/utils/fetch";
export default {
  data() {
    return {
      resultVisible: false,
      tabType: "first",
      dialogVisible:false,
      selectvalue:'1'
    };
  },
  components: { KeyValueList, DrawerRespone },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    onSend() {
      this.resultVisible = true;
      // this.$store.commit("setRequestResponse", requestResponseList[0]);
      if(this.$store.state.selectedInterface.data.func === 'get'){
        let paramsList = _.cloneDeep(this.$store.state.selectedInterface.data.params.filter(one=>one.key))
        const paramsObj = {}
        if(paramsList[0]){
          paramsList.forEach(one=>{
          paramsObj[one.key] = one.value
        })
        }

        let headersList = _.cloneDeep(this.$store.state.selectedInterface.data.headers.filter(one=>one.key))
        const headersObj = {}
        if(headersList[0]){
          headersList.forEach(one=>{
          headersObj[one.key] = one.value
        })
        }
        get(this.$store.state.selectedInterface.data.url,paramsObj,headersObj).then(res=>{
          this.$store.commit('setRequestResponse',res)
        }).catch(err=>{
          this.$store.commit('setRequestResponse',err)
        }).finally((res)=>{
          this.resultVisible = true;
        })
      }
      if(this.$store.state.selectedInterface.data.func === 'post'){
        let formList = _.cloneDeep(this.$store.state.selectedInterface.data.form.filter(one=>one.key))
        const formObj = {}
        if(formList[0]){
          formList.forEach(one=>{
            formObj[one.key] = one.value
        })
        }
        let headersList = _.cloneDeep(this.$store.state.selectedInterface.data.headers.filter(one=>one.key))
        const headersObj = {}
        if(headersList[0]){
          headersList.forEach(one=>{
          headersObj[one.key] = one.value
        })
        }
        post(this.$store.state.selectedInterface.data.url,formObj,headersObj).then(res=>{
          this.$store.commit('setRequestResponse',res)
        }).catch(err=>{
          this.$store.commit('setRequestResponse',err)
        }).finally(()=>{
          this.resultVisible = true;
        })
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
      this.resultVisible = false;
      this.$store.commit("setRequestResponse", null);
        })
        .catch(_ => {});
    }
  }
};
</script>

<style scoped>
.detailPage {
  padding: 12px;
}
 .el-drawer__header {
  margin-bottom: 8px !important;
}
</style>
